<!--  -->
<template>
  <div class="swiper">
    <swiper ref="mySwiper" :options="swiperOptions" class="swiper-wrap">
      <swiper-slide><img src="~assets/img/show/15.jpg" alt="" /></swiper-slide>
      <swiper-slide><img src="~assets/img/show/16.jpg" alt="" /></swiper-slide>
      <swiper-slide><img src="~assets/img/show/17.jpg" alt="" /></swiper-slide>
      <swiper-slide><img src="~assets/img/show/18.jpg" alt="" /></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination ",
        },
        loop: true,
      },
    };
  },
};
</script>

<style scoped>
.swiper {
  padding: 10px 30px;
  height: 300px;
}
.swiper img {
  width: 100%;
  height: 100%;
}
.swiper-wrap {
  margin: 0 auto;
}
</style>